<template>
  <gpopover trigger="click" samewidth ref="parentref">
    <template #trigger>
      <!--      输入框-->
      <div class="border rounded-sm w-40 juzhong p-1" :class="[...classlist]">
        <input type="text" v-model="value"  :placeholder="$props.placeholder"
               class="flex-1 h-full outline-none"
               :class="[$props.editable?'pointer-events-none':'']"
               @click.prevent @keyup.prevent @keydown.prevent>
        <span class="h-full cursor-pointer select-none juzhong hover:text-red-500" @click.stop.prevent="qingkong()">
          <Icon>
            <Close></Close>
          </Icon>
        </span>
      </div>
    </template>
    <!--    显示的备选项-->
    <div class="mx-h-32 border">
      <slot>
        <div class="w-full h-20 juzhong">
          <span class="text-gray-400 select-none">没有数据</span>
        </div>
      </slot>
    </div>
  </gpopover>
</template>

<script>
import {ref, watch, defineComponent, provide, nextTick,} from "vue"
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {Icon} from "@vicons/utils"
import {Close} from "@vicons/ionicons5"
export default defineComponent({
  name: "gselect",
  components: {Icon,Close,},
  props: {
    // 尺寸
    size: {
      type: "middle",
      validator: (value) => {
        return ["large", "big", "middle", "small", "mini"].includes(value)
      }
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 占位提示
    placeholder:{
      default: "请选择",
      type: String,
    },
    // 可编辑性
    editable: {
      default: true,
      type: Boolean,
    },
  },
  setup(prop, context) {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const parentref = ref(null)
    const classlist = ref([])
    watch(() => prop, () => {
      init()
    })
    const init = () => {
      classlist.value = []
      switch (prop.size) {
        case "small":
          classlist.value = [...classlist.value,"h-9"]
          break;
        case "large":
          classlist.value =[...classlist.value,"h-12"]
          break;
        case "mini":
          classlist.value = [...classlist.value,"h-7"]
          break;
        default:
          classlist.value = [...classlist.value,"h-7"]
      }
    }

    // 定义一个列表，存放所有备选数据
    const beixuanlist = ref([])
    const shoujidate = () => {
      console.log($slots)
    }
    const value = ref("")
    const label = ref("")
    const valuelist = ref([])
    const labellist = ref([])
    const dianji=(shuju)=>{
      console.log("收到选项的点击事件",shuju)
      if(prop.multiple){
        // 多选情况
        if(valuelist.value.includes(shuju)){
          const index = valuelist.value.indexOf(shuju)
          valuelist.value.splice(index,1)
        }else{
          valuelist.value.push(shuju)
        }
      }else{
        // 单选情况
       value.value = shuju
        // 子组件点击后，立刻隐藏弹窗
        nextTick(()=>{
          console.log(parentref.value,"组件抛出了什么")
          parentref.value.doClose()
        })
      }
    }
    // 监听单选
    watch(()=>value,()=>{
      beixuanlist.value.forEach(item=>{
        if(item?.value === value.value){
          label.value = item?.value
        }
      })
    })
    // 监听多选
    watch(()=>valuelist,()=>{
      labellist.value=beixuanlist.value.map(item=>{
        if(valuelist.value.includes(item?.value)){
          return item?.label;
        }
      })
    })
    provide("selectvalue", value);
    provide("clickfunc",dianji)
    // 点击叉号清空数据
    const qingkong = () => {
      value.value = ""
      valuelist.value = []
    }
    // 初始化区域
    init()
    return {
      classlist, shoujidate,dianji,value,parentref,qingkong
    }
  },
})
</script>

<style scoped>

</style>
